/**
 * 处理传入的组件颜色信息
 * @author jaylen
 */
import { ref } from 'vue'
import { ColorInfo } from '../../types'

export default function useComponentColor() {
  // 颜色信息
  // 图鸟内置字体颜色(对应的类)
  let fontColorClass = ref('')
  // 用户自定义字体颜色(对应style)
  let fontColorStyle = ref('')
  // 图鸟内置背景颜色(对应的类)
  let bgColorClass = ref('')
  // 用户自定义背景颜色(对应style)
  let bgColorStyle = ref('')

  /**
   * 分离颜色信息
   * @param type 颜色类型
   * @param value 颜色的值
   * @returns 颜色信息
   */
  const splitColorInfo = (type: 'color' | 'shadow' | 'border' | 'bg', value: string): ColorInfo => {
    let colorInfo: ColorInfo = {
      value: '',
      type: ''
    }
    if (!!value) {
      if (value.startsWith('tn-')) {
        const colorReg: RegExp = new RegExp(`^tn-(${type})`)
        const bgReg: RegExp = new RegExp(`^tn-(bg)|(dynamic-bg)|(cool-bg)`)
        const classReg: RegExp = type != 'bg' ? colorReg : bgReg
        if (classReg.test(value)) {
          colorInfo.value = value
          colorInfo.type = 'class'
        }
      } else {
        const styleReg: RegExp = type === 'color' ? /^(#)|(rgb)|(rgba)/ : /^(#)|(rgb)|(rgba)|(transparent$)/
        if (styleReg.test(value)) {
          colorInfo.value = value
          colorInfo.type = 'style'
        }
      }
    }
    return colorInfo
  }

  /**
   * 生成的颜色类类型
   */
  type ColorStyleType = {
    /**
     * 字体颜色
     */
    color?: string,
    /**
     * 背景颜色
     */
    backgroundColor?: string
  }
  type GenerateColorInfoType = {
    /**
     * 可用的class
     */
    class: string[],
    /**
     * 可用的style
     */
    style: ColorStyleType
  }
  
  /**
   * 生成组件字体和背景颜色的信息
   * @param fontColor 字体颜色的值
   * @param bgColor 背景颜色的值
   * @returns 返回生成组件字体和背景颜色的信息
   */
  const generateColorInfo = (fontColor: string, bgColor?: string): GenerateColorInfoType => {
    let info: GenerateColorInfoType = {
      class: [],
      style: {}
    }

    // 获取对应的颜色信息
    if (!!bgColor) {
      const bgColorInfo = splitColorInfo("bg", bgColor)
      if (bgColorInfo.type === 'class') {
        info.class.push(bgColorInfo.value)
      } else if (bgColorInfo.type === 'style') {
        info.style.backgroundColor = bgColorInfo.value
      }
    }
    if (fontColor !== '') {
      const colorInfo = splitColorInfo("color", fontColor)
      if (colorInfo.type === 'class') {
        info.class.push(colorInfo.value)
      } else if (colorInfo.type === 'style') {
        info.style.color = colorInfo.value
      }
    }
    return info
  }

  return {
    fontColorClass,
    bgColorClass,
    fontColorStyle,
    bgColorStyle,
    splitColorInfo,
    generateColorInfo
  }
}